<template>
	
  <view class="container">
    <!-- 顶部轮播图 -->
	<!-- 公告栏 -->
	  <view class="notice-header">
	    <uni-icons type="sound" size="20" color="#fff" />
	    <view class="marquee-container">
	      <view class="marquee-content" :style="{ animationDuration: animationDuration }">
	        {{ notice }}
	      </view>
	    </view>
	  </view>
    <view class="carousel-section">
      <swiper class="swiper" style="height: 28vh;" indicator-dots autoplay interval="3000" circular>
        <swiper-item v-for="item in swiperData">
			<!-- aspectFill -->
          <image class="swiper-image" :src="getBaseUrl+item.imageUrl" mode="aspectFill"
		  @click="gotoOtherPage(item)">
		  </image>
        </swiper-item>
      </swiper>
	  
    </view>

    <!-- 信息列表 -->
     <!-- 分类标签栏 -->
        <view class="tabs-section">
                 <uni-segmented-control 
                   :current="currentTab" 
                   :values="tabs" 
                   @clickItem="handleTabChange"
                   style-type="text"
                   active-color="#409eff"
                 />
               </view>
    
        <!-- 信息列表 -->
        <!-- 改为scroll-view实现 -->
           <scroll-view 
		   refresher-enabled
		   :refresher-triggered="loading"
		   @refresherrefresh="loadData"
             class="list-scroll"
             scroll-y
             :show-scrollbar="false"
             @scrolltolower="onReachBottom"
             :scroll-with-animation="true"
           >
             <view class="list-container">
				 
               <block v-for="item in filteredList" :key="item.id" 
			     >
				 <view v-if="item.tag_type!='notice'">
			 
                 <view 
                   class="list-item"
                   :class="`type-${item.tag_type}`"
                   @click="handleItemClick(item)"
                 >
                   <!-- 标签头 -->
                   <view class="item-header">
                     <view class="item-tag" :class="`tag-${item.tag_type}`">
                       {{ typeLabels[item.tag_type] }}
                     </view>
                   </view>
       
                   <!-- 内容主体 -->
                   <view class="item-body">
                     <image 
                       v-if="item.cover" 
                       class="item-cover"
                       :src="getBaseUrl+'/'+ item.cover" 
                       mode="aspectFill"
                     />
                     <view class="item-content">
                       <view class="item-title">{{ item.title }}</view>
                       <view class="item-meta">
                         <uni-icons v-if="item.tag_type === 'event'" type="calendar" size="14" color="#666" />
                         <text class="meta-text">{{ item.date }}</text>
                       </view>
					   <view class="item-desc">查看详情</view>
                      <!-- <view class="item-desc">{{ item.content }}</view> -->
                     </view>
                   </view>
                 </view>
				 </view>
               </block>
       
               <!-- 加载状态 -->
               <view class="loading-footer">
                 <text v-if="loading" class="loading-text">
                   <uni-icons type="spinner-cycle" size="16" color="#999" class="loading-icon" />
                   加载中...
                 </text>
                 <text v-else-if="noMore" class="no-more">- 已经到底了 -</text>
               </view>
             </view>
           </scroll-view>
  </view>
</template>

<script setup>
import { ref, onMounted,computed } from 'vue'
import { http } from '../../utils/requestUtil';
import getBaseUrl from '../../utils/baseUrl';
// 模拟数据
const swiperData = ref([
 
])
const notice = ref('伯乐在线')
const newsList = ref([])
const currentPage = ref(1)
const loading = ref(false)
const noMore = ref(false)
const animationDuration = computed(() => {
  return Math.max(notice.value.length * 0.01, 20) + 's' // 根据文本长度动态计算时长
})
const gotoOtherPage = (item)=>{
	if(item.adType == 'inner'){
		uni.navigateTo({
		  url: item.adLink
		})
	}else{
		window.location.href=item.adLink
	}
	// console.log(item.link)
}
//到底底部
const onReachBottom = ()=>{
	noMore.value == true ? false : loadData()
}
// 分类标签配置
const tabs = ref(['全部', '新闻', '活动'])
  //恢复是这里here
// const tabs = ref(['全部', '新闻', '公告', '活动'])
const typeLabels = {
  news: '最新动态',
  notice: '重要通知',
  event: '近期活动'
}

// 当前选中标签
const currentTab = ref(0)

// 模拟数据（添加tag_type字段）
const mockData = ref([])
// const mockData = Array.from({ length: 10 }, (_, i) => {
	
//   const types = ['news', 'notice', 'event']
//   return {
//     id: i + 1,
//     title: `公2132司${types[i%3] === 'news' ? '动态' : types[i%3] === 'notice' ? '公告' : '活动'} ${i + 1}`,
//     date: `2024-03-${10 + i}`,
//     content: '这里是12312最新的公司动态内容摘要，点击查看详情...',
//     cover: `/static/home.png`,
//     tag_type: types[i%3]  // 添加分类标识
//   }
// })

// 过滤后的列表
const filteredList = computed(() => {
  if(currentTab.value === 0) return mockData.value
  const filterType = ['news', 'event'][currentTab.value - 1]
  //恢复是这里here
    // const filterType = ['news', 'notice', 'event'][currentTab.value - 1]
  return mockData.value.filter(item => item.tag_type === filterType)
})

// 切换标签
const handleTabChange = (e) => {
  currentTab.value = e.currentIndex
}
// 模拟数据加载
const haveNotice =ref(false)
const loadData = async () => {
  if (loading.value || noMore.value) return
  // console.log(currentPage.value)
  try{
  	loading.value = true
  		const resData =  await http.get(`/bole/content/list?pageNum=${currentPage.value}&pageSize=6`)
		// swiperData.value=resData.additionalList
  		const categoryMap = {
  		        1: 'news',
  		        2: 'event',
  		        3: 'notice'
  		    };
  			// console.log(resData.total)
  		if (resData.total <= mockData.value.length) {
  		    noMore.value = true;
  			loading.value=false
  		    return;
  		}
  		const tempData =  resData.rows.map((item, index) => {
			if(item.contentType==3 && haveNotice.value == false){
			 const contentWithoutP = item.content.replace(/<p.*?>(.*?)<\/p>/g, '$1');
			    notice.value = item.title + ':' + contentWithoutP;
			    haveNotice.value = true;
			}
  		        return {
  		            id: item.contentId,
  		            title: item.title,
  		            date: item.createTime,
  		            content: item.content,
  		            cover:item.cover,
  		            tag_type: categoryMap[item.contentType] || 'news' // 如果 categoryId 不存在，默认使用 'news'
  		        };
  		    });
  		  // `/content/list?page=${page}&pageSize=${pageSize}`;
  		  if(currentPage.value == 1){
  			  mockData.value = tempData
  		  }else{
  			   mockData.value = [...mockData.value, ...tempData];
  		  }
  		 
  	loading.value = false
  	  currentPage.value++
  }catch(e){
	  console.log(e)
	  uni.showToast({
	  	title:'',
		icon:'error'
	  })
  	loading.value = false
  }
    
    // noMore.value = currentPage.value > 3 // 模拟总共3页数据

}
// 列表项点击
const handleItemClick = (item) => {
  uni.navigateTo({
    url: `/pages/home/newsDetail/newsDetail?id=${item.id}`
  })
}

// 轮播图点击
const handleSwiperClick = (item) => {
  uni.navigateTo({
    url: item.link
  })
}
import { onReachBottom as uniOnReachBottom } from '@dcloudio/uni-app'
import { onLoad } from '@dcloudio/uni-app';
// 注册页面的触底事件
// const page = getCurrentPages().pop()
// page.onReachBottom = onReachBottom()
// const 
const loadSwiper = async () => {
	const res =await http.get('/swiper/ad/list')
	swiperData.value = res.rows;

};

// 单独添加这个script块处理微信分享

// 修改 onMounted 部分
onLoad(async () => {
  try {
    // 并行执行关键请求
    await Promise.all([loadSwiper(), loadData()]);
	// loadData()
  } catch (e) {
    uni.showToast({ title: '请登录', icon: 'error' });
  }
});
</script>
<script>
// #ifdef MP-WEIXIN
export default {
  onShareAppMessage() {
    return {
      title: "高潜人才",
      path: `/pages/home/home`
    }
  },
  onShareTimeline() {
      return {
        title: '专业人才测评，发现你的潜力！',
        query: 'from=timeline',          // 可选参数
        imageUrl: '/static/wx.png' // 朋友圈专用图片
      }
    }
}
// #endif
</script>
<style scoped>
/* 公共样式 */
.flex-center { display: flex; align-items: center; }
.mt-20 { margin-top: 20rpx; }
.mr-15 { margin-right: 15rpx; }
.p-20 { padding: 20rpx; }
.rounded-16 { border-radius: 16rpx; }
.box-shadow { box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05); }

.notice-header {
	height: 45rpx;
	 position: relative;
	  overflow: hidden;
  background: linear-gradient(135deg, #409eff, #337ecc);
  color: #fff;
  padding: 20rpx 30rpx;
  padding-right: 210rpx;
  padding-top: 100rpx;
  font-size: 28rpx;
  box-shadow: 0 4rpx 12rpx rgba(64,158,255,0.2);
  /* 合并 flex 布局 */
  display: flex;
  align-items: center;
}
.marquee-container {
  flex: 1;
  margin-left: 20rpx;
  overflow: hidden;
  white-space: nowrap;
}

.marquee-content {
  display: inline-block;
  position: relative;
  animation: marquee 20s linear infinite;
  padding-left: 100%; /* 初始偏移 */
  white-space: nowrap;
}

/* 跑马灯动画 */
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* 适配短文本 */
.marquee-content:before {
  content: attr(data-text);
  position: absolute;
  left: 100%;
  white-space: nowrap;
  padding-left: 40rpx;
}
.notice-text { margin-left: 15rpx; line-height: 1.4; }

.carousel-section {
  margin: 20rpx;
  overflow: hidden;
  /* 合并公共样式 */
  border-radius: 16rpx;
  box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.1);
}

.swiper-image {
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;
}

.tabs-section {
  margin: 30rpx 20rpx 0;
  background: #fff;
  /* 合并公共样式 */
  border-radius: 12rpx;
  padding: 10rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
}

.container {
  background: #f5f7fa;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  height: 100vh; /* 合并重复定义 */
}

.list-scroll {
  flex: 1;
  /* 移除重复的 height: 10px，依赖 flex 布局 */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.list-container {
  padding: 20rpx;
  box-sizing: border-box;
}

.list-item {
  background: #fff;
  /* 合并公共样式 */
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 6rpx 20rpx rgba(0,0,0,0.06);
  transition: transform 0.2s ease;
  position: relative;
  overflow: hidden;
}

.list-item:active { transform: scale(0.98); }

/* 分类标签公共样式 */
.item-header {
  padding: 20rpx;
  border-bottom: 1rpx solid #eee;
}

.item-tag {
  display: inline-block;
  padding: 6rpx 20rpx;
  border-radius: 32rpx;
  font-size: 24rpx;
  transform: translateY(-2rpx);
}

/* 分类标签差异化样式（合并公共伪元素样式） */
.list-item::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 8rpx;
  height: 100%;
}

.type-news::after { background: #1890ff; }
.type-notice::after { background: #fa8c16; }
.type-event::after { background: #52c41a; }

.tag-news { background: #e6f7ff; color: #1890ff; }
.tag-notice { background: #fff7e6; color: #fa8c16; }
.tag-event { background: #f6ffed; color: #52c41a; }

.item-body {
  display: flex;
  padding: 20rpx;
}

.item-cover {
  width: 240rpx;
  height: 180rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
  flex-shrink: 0;
}

.item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.item-title {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 12rpx;
  line-height: 1.4;
}

.item-meta {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin-bottom: 12rpx;
}

.meta-text {
  font-size: 24rpx;
  color: #999;
}

.item-desc {
  font-size: 28rpx;
  color: #666;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.loading-footer {
  text-align: center;
  padding: 40rpx 0;
}

.loading-text {
  color: #999;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
}

.loading-icon { animation: rotate 1s linear infinite; }

.no-more {
  color: #ccc;
  font-size: 26rpx;
  letter-spacing: 2rpx;
}

/* 动画只保留一份 */
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 响应式布局（合并重复的 container 定义） */
@media (min-width: 768px) {
  .container { max-width: 750px; margin: 0 auto; }
  .carousel-section { margin: 30rpx 40rpx; }
}
</style>